import React,{Component} from 'react';
import{ connect } from 'react-redux';
import { withRouter } from 'react-router-dom';//在非路由组件中，要使用路由组件的api
import dayjs from 'dayjs';
import {Button, Modal} from 'antd';
import { FullscreenOutlined, FullscreenExitOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import screenfull from 'screenfull';
import { createScreenFullAction, createDeleteUserInfoAction, createWeatherAction} from '../../../redux/action_creators/login_action';
import { reqCity } from '../../../api';
import menuList from '../../../config/adminMenu';
import {CITY} from '../../../config';
import './header.less'

@connect(
    state=>({userInfo:state.userInfo,menu:state.menu}),
    {
        changeScreen:createScreenFullAction,
        deleteUserInfo:createDeleteUserInfoAction,
        getWeather:createWeatherAction
    }
)
@withRouter//高阶路由组件,withRouter能把一个非路由组件包装成一个路由组件
 class Header extends Component {
     state={
         title:'首页',
         dayTime:dayjs().format('YYYY年MM月DD日  HH:mm:ss')
     }
    componentDidMount(){
        let {  changeScreen, } = this.props
        // 获取天气信息
        this.getCity()
        // 给screenfull绑定监听
        screenfull.on('change', () => {
            console.log('Am I fullscreen?', screenfull.isFullscreen ? 'Yes' : 'No');
            // 改变isFull的状态，切换图标
           changeScreen()
        });
        clearTimeout(this.timeID)
        this.timeID = setInterval(() => {
            // 自动刷新时间
           this.setState({
            dayTime:dayjs().format('YYYY年MM月DD日  HH:mm:ss')
           })
        }, 1000);
        // 展示当前菜单名称
       this.getTitle()
    }
    // 获取当前城市地址
    getCity= async()=>{
        let { getWeather} = this.props
        let result = await reqCity();
        // 获取当前城市天气
        if(result.status) getWeather(result.city)
        else getWeather(CITY)
    }

    componentWillUnmount(){
        // 退出登录后，关闭时间自动刷新
        clearTimeout(this.timeID)
    }
    // 切换全屏按钮的回调
    changeScreenFull=() =>{
        // 请求去全屏
        screenfull.toggle();
    }
    // 退出登录
    logOut=() =>{
        let { deleteUserInfo} = this.props
        Modal.confirm({
              icon: <ExclamationCircleOutlined />,
              title:'退出登录',
              content:'你确定要退出登录吗？',
              okText:'确定',
              cancelText:'取消',
              onOk() {
                // console.log('确定');
                deleteUserInfo()
              },
              onCancel() {
                // console.log('取消');
              },
            });
    }
    // 获取当前标题
    getTitle=()=>{
        const {pathname} = this.props.location
        let pathKey = pathname.split('/').reverse()[0]
        if(pathname.indexOf('product') !== -1) pathKey = 'product'
        let title = '';
        menuList.forEach((item) => {
            if(item.children instanceof Array){
              let temp= item.children.find((cItem)=>{
                    return cItem.key===pathKey
                })
                if(temp) title = temp.title
            }else{
                if(pathKey === item.key) title = item.title
            }
        });
        this.setState({title})
    }
    render(){
        const { user, isFull, weatherObj } = this.props.userInfo

        return (
            <header className="header">
                
                <div className="header-top">
                    <div className="header-top-left">鑫源培训机构管理系统</div>
                    <div className="header-top-right">
                        <Button size="small" onClick={this.changeScreenFull}>
                            {isFull ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
                        </Button>
                    <span className="username">欢迎，{user.username}</span> 
                    <Button onClick={this.logOut} type="link" size="small">退出</Button>
                    </div>
                </div>
                <div className="header-bottom">
                    <div className="header-bottom-left">
                        {this.props.menu.title || this.state.title}
                    </div>
                    <div className="header-bottom-right">
                        <span>{this.state.dayTime}</span>
                        <span>{weatherObj.province}{weatherObj.city}</span>
                        <span>{weatherObj.weather}  {weatherObj.temperature}{weatherObj.temperature? '°' :''}</span>
                    </div>
                </div>
            </header>
        );
    }
}
export default Header;